<template>
  <div ref="chartDom" style="width: 100%;height:40vh;"></div>
</template>

<script setup>
import { onMounted, ref, nextTick } from 'vue';
import * as echarts from 'echarts';
import { eventBus } from '../eventBus'; // 引入事件总线

const chartDom = ref(null);
const myChart = ref(null);
// 定义类别名称
const categories = ['Comedy','Action','Crime','Fantasy','Adventure',
                'Family','Romance','Gay','Sci-Fi','Erotic',
                'Dance','Animation','Thriller','Children','History',
                'War','Biography','Music','Documentary','Western',
                'Suspense','Wuxia','Costume','Horror','Sports',
                'Disaster','Short Film','Ghosts','Opera','Talk Show',
                'Reality Show'];
// 读取 label.txt 文件并解析数据
const labels = ref([]);

onMounted(async () => {
  await nextTick(); // 确保 DOM 更新完成

  if (chartDom.value) {
    myChart.value = echarts.init(chartDom.value);
    
    // 读取 label.txt 文件
  const response = await fetch('src/assets/label.txt');
  const text = await response.text();
  const lines = text.split('\n');
  lines.forEach(line => {
    const [id, attributes] = line.split('\t');
    labels.value.push({ id: id.trim(), attributes: attributes.trim() }); // 确保 ID 和属性都没有额外的空格
  });

    // 初始化雷达图
    initRadarChart();
  }
  // 监听节点选择事件
  eventBus.on('node-ids', ({ id1, id2 }) => {
    console.log('Node IDs selected:', id1, id2); // 添加日志以确认事件触发 
    updateRadarChart(id1, id2);
  });
});

const initRadarChart = () => {
  const option = {
    legend: {
       data: ['Node 1', 'Node 2']
    },
    radar: {
      indicator: categories.map((category) => ({
        name: category
      }))
    },
    series: [
      {
        name: 'Node 1',
        type: 'radar',
        data: [{ value: Array(categories.length).fill(0), name: 'Node 1' }],
        // 设置 Node 1 的颜色和线条样式
        itemStyle: {
          color: '#FF0800FF' // 节点颜色
        },
        lineStyle: {
          color: '#FF0800FF' // 线条颜色
        }
      },
      {
        name: 'Node 2',
        type: 'radar',
        data: [{ value: Array(categories.length).fill(0), name: 'Node 2' }],
        // 设置 Node 2 的颜色和线条样式
        itemStyle: {
          color: '#0099FFFF' // 节点颜色
        },
        lineStyle: {
          color: '#0099FFFF' // 线条颜色
        }
      }
    ]
  };

  myChart.value.setOption(option);
   // 监听窗口大小变化事件
   window.addEventListener('resize', () => {
      myChart.value.resize();
    });
};

const updateRadarChart = (id1, id2) => {
  const attributes1 = labels.value.find(item => item.id === id1)?.attributes;
  const attributes2 = labels.value.find(item => item.id === id2)?.attributes;


  if (attributes1 && attributes2) {
    const values1 = attributes1.split('').map(char => parseInt(char, 31));
    const values2 = attributes2.split('').map(char => parseInt(char, 31));
    myChart.value.setOption({
      series: [
        {
          data: [
            {
              value: values1,
              name: 'Node 1'
            }
          ],
          lineStyle: {
            width: 6, // 线条宽度
          }
        },
        {
          data: [
            {
              value: values2,
              name: 'Node 2'
            }
          ],
          lineStyle: {
            width: 2, // 线条宽度
          }
        }
      ]
    });
  } else {
    console.log('No attributes found for node IDs:', id1, id2); // 如果没有找到属性，打印日志
  }
};
</script>

<style scoped>
/* 可以在这里添加一些样式 */
</style>